<template>
	<view class="container">
		<view class="cu-card">
			<view class="reg_box" v-for="(item, index) in addressList" :key="index">
				<view class="reg_box_bg"></view>
				<view class="c_item">
					<image src="../../static/images/icon-location.png"></image>
					<view class="item_contain">
						<view class="title">{{ item.name }}   {{ item.phone }} </view>
						<view class="is_chose" v-if="item.is_default">默认</view>
						<view class="mes">{{ item.area }} {{ item.details }}</view>
					</view>
					<!-- <view class="btn" @click="">客服</view> -->
					<view class="edit" @click="checkAddress(item.id)"><image src="../../static/images/icon_edit.png"></image></view>
				</view>
			</view>
			<view class="margin-lr-lg padding-0 submit_btn" style="position: fixed;bottom:10vw;left:10vw;">
				<button class="cu_btn" type="button" @click="navToUrl('/pages/address/manage?type=add')">新增地址</button>
			</view>
			<!-- <view class="cu-item shadow-warp" v-for="(item, index) in addressList" :key="index">
				<view class="content" @click="checkAddress(item.id)">
					<view class="cu-list menu">
						<view class="cu-item">
							<view class="text-lg">{{ item.name }}   {{ item.phone }} </view>
							<view class="action">
								<view class="text-xs cu-btn bg-red round" v-if="item.is_default">默认</view>
							</view>
						</view>
						<view class="cu-item">
							<view class="text-cut text-lg">{{ item.area }} {{ item.details }}</view>
						</view>	
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressList:[],
				userinfo:[],
				source:0
			};
		},
		onLoad: function (option) {
			this.source = option.source;
			this.helper.checkLogin();
			this.getData();
			this.getAddress();
		},
		onNavigationBarButtonTap(val) {
			uni.navigateTo({
				url: '/pages/address/manage?type=add',
			});	
		},
		methods: {
			getData:function(){
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['username='+info.username,'token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"getUserInfo",
					timestamp:timestamp,
					data:{username:info.username,token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.userinfo = res.data.data.userinfo;
					this.name = this.userinfo.name;
					setTimeout(() => {
						uni.hideLoading();
					}, 300);
					
					if(this.userinfo.auth == 0){
						uni.showToast({
							title:"请先实名认证",
							icon:'none'
						})
						
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/user/certification',
							});	
						}, 2000);
						
					}
				})
			},
			getAddress:function(){
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"addressList",
					timestamp:timestamp,
					data:{token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.addressList = res.data.data.addressList;
					setTimeout(() => {
						uni.hideLoading();
					}, 300);
				})
			},
			delAddress:function(address_id){
				var that = this;
				uni.showModal({
					title: "提示",
					content: "确认删除地址？",
					showCancel: true,
					confirmText: "确定",
					success:function(res){
						if(res.confirm){
							uni.showLoading({
								title:"数据删除中",
								mask:true
							})
							var info = uni.getStorageSync("userinfo");
							let timestamp = that.helper.now();
							let sign = that.helper.setSign(['address_id='+address_id,'token='+info.token,'timestamp='+timestamp]);
							that.helper.req({
								api:"delAddress",
								timestamp:timestamp,
								data:{address_id:address_id,token:info.token},
								header:{sign:sign},
								method:'POST',
							}).then(res=>{
								uni.hideLoading();
								if(res.data.errorcode>0){
									uni.showToast({
										title:res.data.message,
										icon:"none"
									})
									return;
								}else{
									uni.showToast({
										title: "地址删除成功",
										icon: "success"
									})
									
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages/address/address',
										});	
									}, 300);
								}
								
							})
						}
					}
				})
			},
			checkAddress: function(address_id) {
				if(this.source == 1){
					var pages = getCurrentPages();
					var currPage = pages[pages.length - 1]; //当前页面
					var prevPage = pages[pages.length - 2]; //上一个页面
					//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
					prevPage.$vm.address_id = address_id;
					uni.navigateBack();
				}else{
					uni.navigateTo({
						url: '/pages/address/manage?type=edit&address_id='+address_id
					});	
					
				}
			},
			// 链接
			navToUrl:function(url){
				uni.navigateTo({
					url: url,
				});	
			},
		},
	};
</script>

<style lang="scss">
	page {
		// background-image: url('@/static/images/person/center-bg.png');
		// background-repeat: no-repeat;
		// background-size: 100% 100%;
		background-color: #ddeafd;
		height:100%;
	}
	.reg_box{
		width: 94vw;
		margin: 3vw;
		height: 26vw;
		padding: 3vw;
		// background: #ffffff;
		border-radius: 6px;
		position: relative;
		
		.reg_box_bg{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background-color: #63cbff;
			opacity: 0.2;
			border-radius: 10px;
			z-index: 1;
		}
		
		.c_item{
			position: absolute;
			left: 3vw;
			top: 3vw;
			z-index: 2;
			display: flex;
			image{
				width: 10vw;
				height: 10vw;
				margin: 4vw 0;
			}
			.item_contain{
				width: 70vw;
				height: 20vw;
				padding: 3vw 0 0 3vw;
				position: relative;
				
				.title{
					font-size: 16px;
					line-height: 36px;
					color:#fff;
				}
				.mes{
					font-size: 14px;
					line-height: 20px;
					color:#9BBFB2;
				}
				.is_chose{
					position: absolute;
					top: 4vw;
					right: 4vw;
					background: #E3B554;
					color:#fff;
					width: 50px;
					height: 24px;
					line-height: 24px;
					border-radius: 12px;
					text-align: center;
				}
			}
			.edit{
				width: 10vw;
				image{
					width: 6vw;
					height: 6vw;
				}
			}
			.btn{
				width: 80px;
				height: 30px;
				line-height: 30px;
				font-size: 14px;
				color:#fff;
				background: linear-gradient( 180deg, #4EA4FF 0%, #0041f9 100%);
				border-radius: 15px;
				text-align: center;
				margin: 20px 0;
			}
		}
	}
	
	.cu_btn{
		background: linear-gradient( 180deg, #50A7FF 0%, #3267FF 100%);
		height: 50px;
		width: 70vw;
		color: #fff;
		line-height: 50px;
		font-size: 16px;
		border-radius: 30px;
	}
	.tag{
		font-size: 20upx;
		color: red;
		margin-right: 10upx;
		background: #fffafb;
		border: 1px solid #ffb4c7;
		border-radius: 4upx;
		padding: 4upx 10upx;
		line-height: 1;
	}
</style>
